<template>
  <div class="manage-search">
    <!-- 筛选 -->
    <div class="filter">
      <div class="hasSelect" v-if="showSelect">
        <span class="nor">已选条件</span>
        <span class="sel" v-if="saveData.devname" @click="alone('type')">{{saveData.devname}}</span>
        <span class="sel" v-if="saveData.siteStatus" @click="alone('site')">{{saveData.siteStatus}}</span>
        <span class="clearAll" @click="clearAll()">清除全部</span>
      </div>

      <div class="condition">
        <div class="area">
          <div style="width:170px;float:left;">
            <div class="classification">设备类型</div>
            <div class="all" :class="{'active':isChecktype === 0}" @click="addTypeStatus('')">全部</div>
          </div>
          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li>
                <span
                  :class="['spancolor',{'active':isChecktype === 1}]"
                  @click="addTypeStatus('消防栓')"
                >消防栓</span>
              </li>
              <li>
                <span
                  :class="['spancolor',{'active':isChecktype === 2}]"
                  @click="addTypeStatus('烟感设备')"
                >烟感设备</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 库管不显示设备归属 -->
        <div class="area" v-if="this.role[0].sort !== 60">
          <div style="width:170px;float:left;">
            <div class="classification">设备归属</div>
            <div
              class="all"
              :class="{'active':isCheckarea === 'all'}"
              @click="checkAll('','','all')"
            >{{this.user.company ? this.user.company: '华强'}}</div>
          </div>
          <!-- <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <el-select v-for="(itemFirst,indexFirst) in data" :key="indexFirst">
                <el-option v-for="(item,index) in itemFirst.children" :key="index"></el-option>
              </el-select>
              <li v-for="(item,i) in area_list_data" :key="i">
                <span
                  class="more-con"
                  @click="checkAll(item,i)"
                  :class="{'active':isCheckarea ===  item.name}"
                >{{item.name}}</span>
              </li>
            </ul>
          </div> -->
          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <!-- <el-cascader  :options="area_list_data" v-model="area_list_data"></el-cascader> -->
              <el-cascader :options="area_list_data" :props="{ checkStrictly: true }" clearable></el-cascader>
              <!-- <li v-for="(item,i) in area_list_data" :key="i" @mouseenter="mouseenter_lever(item)">
                <span class="more-con"
                  :class="{'active':isCheckarea ===  item.name}"
                >{{item.name}}</span>
                  <div class="popover">
                  <div class="arrow"></div>
                  <div class="p-content">
                    <div class="popover-content">
                      <li  v-for="(item,index) in leverChildren" :key="index" >{{item}}</li>
                    </div>
                  </div>
                </div>
              </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Config from "../../../../config";
export default {
  name: "Search",
  data: function() {
    return {
      area_list_data: [],
      //选中的dom
      isCheckarea: "all",
      isChecktype: 0,
      saveData: {
        // 设备归属
        siteStatus: "",
        // 选中设备类型
        devname: ""
      },
      // 传递的数据
      datas: {
        // 接收
        typestatus: "",
        sitestatus: "",
        siteId: "" // 站点id
      },
      // show
      showSelect: false,
      // 保存一打开的初始编码,清空用
      clear: null,
      data: [],
      leverChildren:[],
      lever:'' // 等级
    };
  },
  watch: {
    saveData: {
      deep: true,
      handler(data) {
        let flag = 0;
        for (let i in this.saveData) {
          if (!this.saveData[i]) {
            flag++;
          }
        }
        if (flag !== 2) {
          this.showSelect = true;
        } else {
          this.showSelect = false;
        }
      }
    },
    datas: {
      deep: true,
      handler(data) {
        // 一开始初始编码
        if (!this.clear) {
          this.clear = JSON.parse(JSON.stringify(data));
        }
        this.$emit("search_data", this.datas);
      }
    }
  },
  methods: {
    //区域全选
    checkAll(data, i, item) {
      console.log(data, i, item);
      if (item) {
        this.isCheckarea = item;
      } else {
        this.isCheckarea = data.name;
      }
      this.saveData.siteStatus = data.name;
      this.datas.sitestatus = data.name;
      this.datas.siteId = data.id;
    },
    // 添加设备类型
    addTypeStatus(data) {
      if (data === "") {
        this.isChecktype = 0;
      } else if (data === "消防栓") {
        this.isChecktype = 1;
      } else {
        this.isChecktype = 2;
      }
      this.saveData.devname = data;
      this.datas.typestatus = data;
    },
    // 清空所有
    clearAll() {
      this.addTypeStatus("");
      this.checkAll("all");
      // this.datas = JSON.parse(JSON.stringify(this.clear))
    },
    // 清除单个
    alone(data) {
      switch (data) {
        case "type":
          this.addTypeStatus("");
          break;
        case "site":
          this.checkAll("");
          break;
      }
    },
    // 获取当前等级
    getLever (){
      const url = `${Config.DEVICE_MANAGE_URL}/storehouses/query_sub_by_name`;
      let param = {
        devtype: Config.objType.devtype,
        name: this.user.company ? this.user.company: '华强'
      }
      this.$http.get(url, param).then(res => {
        this.lever = res.self.store_level + 1
        this.filteData()
      });
    },
    //筛选列表接口
    filteData() {
      let url = `${Config.DEVICE_MANAGE_URL}/storehouses/query_common?page=0&size=100`;
      var params = {};
      if (this.role[0].sort === 93) {
        params.housetype = "test";
      } else if (this.role[0].sort == 60 && this.district.districtType === 2) {
        params.province = this.district.provinceCode;
      } else if (this.role[0].sort == 60 && this.district.districtType === 3) {
        params.city = this.district.cityCode;
      } else if (this.role[0].sort !== 100) {
        params.housetype = "official";
        params.house_owner = this.user.company;
      }
      this.$http.get(url, params).then(res => {
        var list = [];
        for (var i = 0; i < res.array.length; i++) {
          var item = {};
          if (res.array[i].store_level === this.lever) {
            item.label = res.array[i].name;
            // item.id= res.array[i].id
            // item.super_id= res.array[i].super_id;
            item.children = res.array.filter(
              response => response.super_id === res.array[i].id
            );
            item.children.unshift({label:'全部',id:-1})
            list.push(item);
          }
        }
        console.log(list);
        this.area_list_data = list;
      });
    },
    mouseenter_lever(data){
      this.leverChildren = data.children.map(item => item.label)
    }
  },
  computed: {
    ...mapGetters("user", {
      module: "dealedModule",
      user: "getUser",
      role: "getRole",
      district: "getDistrict"
    })
  },
  mounted() {
    // console.log('user ', this.user)
    // console.log('district ', this.district)
    // console.log('getRole ', this.role[0])
    // this.filteData();
    this.getLever()
  }
};
</script>
<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";
.manage-search {
  margin-bottom: 24px;
  // 搜索
  .filter {
    width: 100%;
    height: auto;
    background: $white;
    padding: 0px 25px;
    box-sizing: border-box;
    .active {
      background: $red;
      padding: 0px 6px;
      color: $white !important;
      border-radius: 10px;
      text-align: center;
      min-width: 22%;
    }
    .more-con.active:after {
      content: "";
      margin-left: 4px;
      vertical-align: 0px;
      border: 4px solid transparent;
      border-top-color: #fff !important;
      display: inline-block;
    }
    .hasSelect {
      cursor: pointer;
      padding-bottom: 20px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
      padding-top: 16px;
      .nor {
        font-size: 14px;
        color: $gray3;
        margin-right: 18px;
      }
      .sel {
        border: 1px solid $red;
        color: $red;
        height: 18px;
        margin-right: 10px;
        padding: 0px 20px 0px 10px;
        border-radius: 10px;
        position: relative;
      }
      .sel::after {
        position: absolute;
        display: block;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        content: " ";
        width: 15px;
        height: 8px;
        background: url("../../../../../static/image/device/sel.png") no-repeat;
      }
      .clearAll {
        color: $gray9;
      }
    }
    .condition {
      .area {
        padding: 17px 0 0;
        line-height: 20px;
        .classification {
          width: 85px;
          color: $gray3;
          font-size: 14px;
          float: left;
        }
        .all {
          text-align: center;
          color: $gray3;
          float: left;
          font-size: 14px;
          cursor: pointer;
        }
         .more {
          color: $gray6;
          float: left;
          border-bottom: 1px solid #f0f0f0;
          width: 100%;
          padding-bottom: 6px;
          li {
            float: left;
            height: 28px;
            font-size: 14px;
            cursor: pointer;
            min-width: 120px;
            position: relative;
            .more-con,
            .spancolor {
              color: #333;
              display: inline-block;
            }
            .more-con:after {
              content: "";
              margin-left: 4px;
              vertical-align: 0px;
              border: 4px solid transparent;
              border-top-color: $gray6;
              display: inline-block;
            }
            .popover {
              display: none;
              width: 528px;
              position: absolute;
              top: 25px;
              left: 0px;
              z-index: 1000;
              cursor: auto;
              user-select: text;
              white-space: normal;
              font-size: 12px;
              line-height: 1.5;
              font-weight: 500;
              text-align: left;
              background: $white;
              box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
              border: 1px solid #e5e5e5;
              border-radius: 4px;
              .arrow {
                border-width: 5px;
                left: 26px;
                top: -10px;
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent transparent #e5e5e5;
                border-style: solid;
              }
              .arrow:after {
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
                content: "";
                margin-top: -3px;
                margin-left: -4px;
                border-width: 4px;
                border-color: transparent transparent $white;
              }
              .p-content {
                background-color: #fff;
                background-clip: padding-box;
                border-radius: 4px;
                .popover-content {
                  padding: 24px 0 24px 24px;
                  span {
                    color: #ccc;
                    font-size: 16px;
                    cursor: default;
                    display: block;
                  }
                }
                .clear {
                  padding: 0px 24px 15px 24px;
                  width: 100%;
                  display: inline-block;
                  box-sizing: border-box;
                  li:nth-of-type(1){
                      margin:0 0px 5px 0;
                  }
                  li {
                    font-weight: 400;
                    // min-width: 25%;
                    min-width: 20%;
                    // margin-bottom: 5px;
                    margin:0 10px 5px 0;
                    float: left;
                    line-height: 20px;
                  }
                }
              }
            }
          }
          li:hover .popover {
            display: block;
          }
        }
        .more.bb {
          border: 0;
        }
      }
      .area:after {
        content: "";
        clear: both; /*清除浮动*/
        display: block; /*确保该元素是一个块级元素*/
      }
    }
  }
}
</style>
